<template>
  <div class="Audio">
    <!-- 播放条 -->
    <div class="g-btmbar">
      <div
        class="m-playbar"
        :class="{
          hover: isShow,
          'm-playbar-lock': isLock,
          'm-playbar-unlock': !isLock,
          lock: isLock,
        }"
        style="visibility: visible"
        @mouseover="isShow = true"
        @mouseleave="isShow = false"
      >
        <div class="updn">
          <div class="left f-fl">
            <a href="javascript:;" class="btn" @click="isLock = !isLock"></a>
          </div>
          <div class="right f-fl"></div>
        </div>
        <div class="bg"></div>
        <div class="hand" title="展开播放条"></div>
        <div class="wrap" id="g_player" style="margin-left: -498.5px">
          <div class="btns">
            <a
              href="javascript:;"
              hidefocus="true"
              data-action="prev"
              class="prv"
              title="上一首(ctrl+←)"
              @click="lastSong"
              >上一首</a
            >
            <a
              href="javascript:;"
              hidefocus="true"
              data-action="play"
              class="ply j-flag"
              title="播放/暂停(p)"
              :class="{ pas: audio.isPlay }"
              @click="onPlay"
              v-show="!audio.isPlay"
              >播放/暂停</a
            >
            <a
              href="javascript:;"
              hidefocus="true"
              data-action="play"
              class="ply j-flag"
              title="播放/暂停(p)"
              :class="{ pas: audio.isPlay }"
              v-show="audio.isPlay"
              @click="onPause"
              >播放/暂停</a
            >
            <a
              href="javascript:;"
              hidefocus="true"
              data-action="next"
              class="nxt"
              title="下一首(ctrl+→)"
              @click="nextSong"
              >下一首</a
            >
          </div>
          <div class="head j-flag">
            <img
              :src="songList[audio.curSong].data[0].al.picUrl"
              class="headImg"
            /><a href="javascript:;" hidefocus="true" class="mask" @click="$router.push(`/songDetail?id=${songList[audio.curSong].data[0].id}`)"></a>
          </div>
          <div class="play">
            <div class="j-flag words">
              <a
                hidefocus="true"
                href="javascript:;"
                class="f-thide name fc1 f-fl"
                title="Sundays (Just Piano Version)"
                >{{ songList[audio.curSong].data[0].name }}</a
              >
              <a
                hidefocus="true"
                href="/mv?id=14306903"
                v-if="songList[audio.curSong].data[0].mv"
                class="mv f-fl"
                title="MV"
              ></a>
              <span class="by f-thide f-fl">
                <span title="">
                  <a class="" href="/artist?id=797159" hidefocus="true"></a>
                </span>
              </span>
              <!-- <a href="/playlist?id=6827562995&amp;_hash=songlist-1862332624" class="src" title="来自歌单"></a> -->
            </div>
            <div class="m-pbar" data-action="noop">
              <div class="barbg j-flag" @mouseup="moveTime($event)">
                <div class="rdy" style="width: 0px"></div>
                <div
                  class="cur"
                  :style="{ width: this.audio.curPlay }"
                  ref="cur"
                >
                  <span class="btn f-tdn f-alpha"><i></i></span>
                </div>
              </div>
              <span class="j-flag time"
                ><em>{{ audio.currentTime | songTimeFormat }}</em> /
                {{ audio.maxTime | songTotalTimeFormat }}</span
              >
            </div>
          </div>
          <div class="rig flex">
            <div class="oper f-fl">
              <a
                href="javascript:;"
                hidefocus="true"
                class="icn icn-pip"
                title="画中画歌词"
                >画中画歌词</a
              >
              <a
                href="javascript:;"
                hidefocus="true"
                data-action="like"
                class="icn icn-add j-flag"
                title="收藏"
                >收藏</a
              >
              <a
                href="javascript:;"
                hidefocus="true"
                data-action="share"
                class="icn icn-share"
                title="分享"
                >分享</a
              >
            </div>
            <div class="ctrl f-fl f-pr j-flag">
              <div class="m-vol" :class="{ hide: isVolHide }">
                <div class="barbg"></div>
                <div class="vbg j-t">
                  <div class="curr j-t" style="height: 93px"></div>
                  <span class="btn f-alpha j-t" style="top: 0px"></span>
                </div>
              </div>
              <a
                href="javascript:;"
                hidefocus="true"
                data-action="volume"
                class="icn icn-vol"
                @click="isVolHide = !isVolHide"
              ></a>
              <a
                href="javascript:;"
                hidefocus="true"
                data-action="mode"
                class="icn icn-loop"
                title="循环"
              ></a>
              <span class="add f-pr">
                <span class="tip" style="display: none">已添加到播放列表</span>
                <a
                  href="javascript:;"
                  title="播放列表"
                  hidefocus="true"
                  data-action="panel"
                  class="icn icn-list s-fc3"
                  >-</a
                >
              </span>
              <div class="tip tip-1" style="display: none">循环</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <audio
      :src="songList[audio.curSong].data[1].url"
      id="audio"
      ref="audio"
      controls
      autoplay
    ></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      isLock: false,
      isVolHide: true,
      songList: [],
      audio: {
        isPlay: false,
        currentTime: 0,
        maxTime: 0,
        curPlay: 0,
        curSong: 0,
        loop: true,
      },
      timer: null,
      curWidth: 0,
      url: "",
    };
  },
  methods: {
    // 播放
    onPlay() {
      this.audio.isPlay = this.$refs.audio.paused;
      this.$refs.audio.play();
    },
    // 暂停
    onPause() {
      this.audio.isPlay = this.$refs.audio.paused;
      this.$refs.audio.pause();
    },
    // 下一首
    nextSong() {
      this.audio.curSong++;
      this.audio.curSong = this.audio.curSong % this.songList.length;
      this.audio.isPlay = true;
      console.log(this.songList);
      console.log(this.audio);
    },
    // 上一首
    lastSong() {
      this.audio.curSong--;
      if (this.audio.curSong < 0) {
        this.audio.curSong = this.songList.length - 1;
      }
      this.audio.isPlay = true;
    },
    upDateSongTime() {
      if (!this.audio.isPlay) {
        this.timer = setInterval(() => {
          this.audio.currentTime = this.$refs.audio.currentTime;
          this.audio.curPlay = (this.audio.currentTime / this.audio.maxTime) * 100000 + "%";
        }, 1000);
      } else {
        clearInterval(this.timer);
      }
    },
    // 移动播放条
    moveTime(e) {
      let x = e.offsetX;
      this.audio.curPlay = x / 466;
      this.$refs.audio.currentTime =
        (this.audio.maxTime * Number(this.audio.curPlay)) / 1000;
    },
    // 下一首播放
    canplay(e) {
      // console.log(e.target);
      //
      e.target.play();
    },
  },
  created() {
    this.songList = localStorage.getItem("songList")
      ? JSON.parse(localStorage.getItem("songList"))
      : [];
  },
  mounted() {
    this.upDateSongTime();
    this.$refs.audio.loop = this.audio.loop;
    // 无效
    // this.$refs.audio.muted = true;
    // setTimeout(() => {
    //   this.$refs.audio.muted = false;
    // }, 500);
    // 下一首播放
    this.$refs.audio.oncanplay = this.canplay;
  },
  beforeDestroy() {
    this.$refs.audio.oncanplay = null;
  },
  updated() {
    this.audio.maxTime = this.songList[this.audio.curSong].data[0].dt;
  },
  filters: {
    songTimeFormat(val) {
      let t = Math.floor(val);
      let m = parseInt(t / 60);
      let s = t % 60;
      function format(val) {
        return val < 10 ? "0" + val : val;
      }
      m = format(m);
      s = format(s);
      let time = m + ":" + s;
      return time;
    },
    songTotalTimeFormat(val) {
      // let totalTimeS = val / 1000;
      let totalTime_m = Math.floor(val / 1000 / 60);
      let totalTime_s = val / 1000 - (totalTime_m * 60).toFixed(0);
      totalTime_s = parseInt(totalTime_s.toFixed(0));
      totalTime_m = totalTime_m < 10 ? "0" + totalTime_m : totalTime_m;
      totalTime_s = totalTime_s < 10 ? "0" + totalTime_s : totalTime_s;
      return `${totalTime_m}:${totalTime_s}`;
    },
  },
};
</script>
 
<style lang="less" scoped>
em,
i {
  font-style: normal;
  text-align: left;
  font-size: inherit;
}

.f-fl {
  float: left;
}

.f-pr {
  position: relative;
  zoom: 1;
}

.g-btmbar {
  position: fixed;
  zoom: 1;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  width: 100%;
  z-index: 1002;
  font-size: 12px;
}

.m-playbar {
  position: absolute;
  zoom: 1;
  top: -7px;
  left: 0;
  width: 100%;
  height: 53px;
  margin: 0 auto;
  transition: 0.5s;
  &.hover {
    top: -53px;
  }
  &.lock {
    top: -53px;
  }
}

.m-playbar .updn {
  position: relative;
  z-index: 11;
}

.m-playbar .updn .left,
.m-playbar .updn .right,
.m-playbar .updn .btn,
.m-playbar .bg,
.m-playbar .btns a,
.m-playbar .head .mask,
.m-playbar .icn,
.m-playbar .ctrl,
.m-playbar .tip,
.m-vol .curr,
.m-playbar .words .mv,
.m-vol .barbg,
.m-playbar .words .src {
  background: url(../assets/images/playbar.png) no-repeat 0 9999px;
}

.m-playbar .updn .left {
  position: absolute;
  top: -14px;
  right: 15px;
  width: 52px;
  height: 67px;
  background-position: 0 -380px;
}

.m-playbar .updn .btn {
  display: block;
  width: 18px;
  height: 18px;
  margin: 6px 0 0 17px;
}

.m-playbar-unlock .updn .btn {
  background-position: -80px -380px;
}

.m-playbar-lock .updn .btn {
  background-position: -100px -380px;
}

.m-playbar .updn .right {
  position: absolute;
  top: -1px;
  right: 0;
  width: 15px;
  height: 54px;
  background-position: -52px -393px;
  pointer-events: none;
}

.m-playbar .bg {
  height: 53px;
  zoom: 1;
  margin-right: 67px;
  background-position: 0 0;
  background-repeat: repeat-x;
}

.m-playbar .hand {
  position: absolute;
  top: -10px;
  width: 100%;
  height: 20px;
  cursor: pointer;
}

.m-playbar .wrap {
  position: absolute;
  left: 50%;
  top: 6px;
  z-index: 15;
  width: 980px;
  height: 47px;
  margin: 0 auto;
  margin-left: -498.5px;
}

.m-playbar .btns,
.m-playbar .head,
.m-playbar .play,
.m-playbar .volum,
.m-playbar .oper {
  float: left;
}

.m-playbar .btns {
  width: 137px;
  padding: 6px 0 0 0;
}

.m-playbar .btns a {
  display: block;
  float: left;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  margin-top: 5px;
  text-indent: -9999px;
}

.m-playbar .btns .prv {
  background-position: 0 -130px;
}

.m-playbar .btns .ply {
  width: 36px;
  height: 36px;
  margin-top: 0;
  background-position: 0 -204px;
}

.m-playbar .btns .pas {
  background-position: 0px -165px;
}

.m-playbar .btns .nxt {
  background-position: -80px -130px;
}

.m-playbar .head,
.m-playbar .head img {
  width: 34px;
  height: 34px;
}

.m-playbar .head {
  position: relative;
  margin: 6px 15px 0 0;
}

.m-playbar .head .mask {
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  width: 34px;
  height: 35px;
  background-position: 0 -80px;
}

.m-playbar .play {
  position: relative;
  width: 581px;
}

.m-playbar .words {
  height: 28px;
  overflow: hidden;
  color: #e8e8e8;
  text-shadow: 0 1px 0 #171717;
  line-height: 28px;
}

.f-fl {
  float: left;
}

.m-playbar .words .fc1 {
  color: #e8e8e8;
}

.m-playbar .words .name {
  max-width: 300px;
}

.m-playbar .words .mv {
  width: 19px;
  height: 17px;
  margin: 6px 0 0 3px;
  background-position: 0 -57px;
}

.m-playbar .words .by {
  max-width: 220px;
  margin-left: 15px;
  color: #9b9b9b;
}

.m-playbar .words .src {
  float: left;
  width: 14px;
  height: 15px;
  margin: 7px 0 0 13px;
  background-position: -110px -103px;
}

.m-pbar .barbg,
.m-pbar .cur,
.m-pbar .rdy,
.m-pbar .left {
  background: url(../assets/images/statbar.png) no-repeat 0 9999px;
}

.m-pbar {
  position: relative;
}

.m-pbar,
.m-pbar .barbg {
  width: 493px;
  cursor: pointer;
}

#g_player .play .m-pbar,
#g_player .play .m-pbar .barbg {
  width: 466px;
}

.m-pbar .barbg,
.m-pbar .cur,
.m-pbar .rdy {
  height: 9px;
  background-position: right 0;
}

.m-pbar .barbg,
.m-pbar .cur,
.m-pbar .rdy {
  height: 9px;
  background-position: right 0;
}

.m-pbar .rdy {
  background-position: right -30px;
}

.m-pbar .cur {
  position: absolute;
  top: 0;
  left: 0;
  width: 1%;
  background-position: left -66px;
}

.m-pbar .btn,
.m-vol .btn {
  background: url(../assets/images/iconall.png) no-repeat;
}

.m-vol .btn {
  position: absolute;
  top: 0;
  left: -8px;
  display: block;
  width: 18px;
  height: 20px;
  background-position: -40px -250px;
  cursor: pointer;
}

.m-pbar .btn {
  position: absolute;
  top: -7px;
  right: -13px;
  width: 22px;
  height: 24px;
  margin-left: -11px;
  background-position: 0 -250px;
}

.m-pbar .btn i {
  visibility: hidden;
  position: absolute;
  left: 5px;
  top: 5px;
  width: 12px;
  height: 12px;
  background: url(../assets/images/loading.gif);
}

.m-pbar .time {
  position: absolute;
  top: -3px;
  right: -84px;
  color: #797979;
  text-shadow: 0 1px 0 #121212;
}

#g_player .oper {
  width: 87px;
}

.m-playbar .icn {
  float: left;
  width: 25px;
  height: 25px;
  margin: 11px 2px 0 0;
  text-indent: -9999px;
}

.m-playbar .icn-pip {
  position: relative;
  background: url(//p1.music.126.net/DLVi_1eymwAX8gDunfd2bg==/109951165524394991)
    no-repeat 0 0;
}

.m-playbar .icn {
  float: left;
  width: 25px;
  height: 25px;
  margin: 11px 2px 0 0;
  text-indent: -9999px;
}

.m-playbar .icn-add {
  background-position: -88px -163px;
}

.m-playbar .icn {
  float: left;
  width: 25px;
  height: 25px;
  margin: 11px 2px 0 0;
  text-indent: -9999px;
}

.m-playbar .icn-share {
  background-position: -114px -163px;
}

.m-playbar .ctrl {
  position: relative;
  z-index: 10;
  width: 126px;
  padding-left: 13px;
  background-position: -147px -238px;
}

.m-vol {
  position: absolute;
  top: -113px;
  left: 9px;
  clear: both;
  width: 32px;
  height: 113px;
}

.m-vol .barbg {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 113px;
  background-position: 0 -503px;
}

.m-vol .vbg,
.m-vol .curr {
  position: absolute;
  top: 11px;
  left: 14px;
  width: 4px;
  height: 93px;
}

.m-vol .vbg {
  padding: 4px 0;
  top: 7px;
}

.m-vol .curr {
  top: auto;
  left: 0;
  background-position: -40px bottom;
  overflow: hidden;
}

.m-playbar .icn-vol {
  background-position: -2px -248px;
}

.m-playbar .icn-loop {
  background-position: -3px -344px;
}

.m-playbar .add {
  float: left;
  width: 59px;
  height: 36px;
}

.m-playbar .tip {
  position: absolute;
  top: -51px;
  left: -65px;
  clear: both;
  width: 152px;
  height: 49px;
  background-position: 0 -287px;
  text-align: center;
  color: #fff;
  line-height: 37px;
}

.m-playbar .icn-list {
  display: block;
  float: none;
  width: 38px;
  padding-left: 21px;
  background-position: -42px -68px;
  line-height: 27px;
  text-align: center;
  color: #666;
  text-shadow: 0 1px 0 #080707;
  text-indent: 0;
  text-decoration: none;
}

.m-playbar .tip-1 {
  top: -35px;
  left: 12px;
  width: 81px;
  height: 39px;
  line-height: 34px;
  background-position: 0 -457px;
}

.m-playbar .words .by a {
  color: #9b9b9b;
}
</style>